<!-- 
媒体查询
    - Media Query，是CSS3的新特性
    - @media可以跟随屏幕尺寸变化而去自动设置成不同的样式，进而重新渲染页面

    ----------------------------
    @media 媒体类型 关键字 (媒体特性) {
        CSS代码;
    }
    ----------------------------
    媒体类型
        根据不同终端设备划分为不同类型，也就是媒体类型
        all     所有设备
        print   打印机、打印预览
        screen  电脑屏幕、平板电脑、智能手机等
    关键字
        将多个媒体类型、或多个媒体特性连接一起，作为媒体查询的条件
        and     且
        not     非，可省略
        only    特指，可省略
    媒体特性
        不同媒体类型具有各自不同的媒体特性（必须用圆括号包裹起来）
        width       定义输出设备的可见区域宽度
        min-width   最小（即：大于等于）
        max-width   最大（即：小于等于）
    ----------------------------
    
    全部都是包含边界的，所以，注意边界问题
    按顺序设置：大到小、或小到大，可以利用层叠性覆盖边界
    ----------------------------
                     800>>>>>>>>    min：大于等于
    <<<<<<<400<<<<<<<800            max：小于等于
    <<<<<<<400                      max：小于等于
    ----------------------------

以下都不能省略
    screen媒体类型、and关键字、关键字两边的空格、圆括号()、单位
 -->
<style>
    /* 屏幕宽度>=800px时，呈现red色 */
    @media screen and (min-width: 800px) {
        body {
            background-color: red;
        }
    }
    /* 屏幕宽度<=800px时，呈现green色 */
    /* @media screen and (min-width: 400px) and (max-width: 799px) { */
    /* 因为层叠性，直接写一个也行 */
    /* @media screen and (max-width: 799px) { */
    /* 边界也会被层叠覆盖，可以直接800px */
    @media screen and (max-width: 800px) {
        body {
            background-color: green;
        }
    }
    /* 屏幕宽度<=400px时，呈现blue色 */
    @media screen and (max-width: 400px) {
        body {
            background-color: blue;
        }
    }
</style>
